<template>
  <commonpanel title="郑钦文（2025）">
    <div class="contentbox">
      <div class="line1">
        <div class="innerbox2">
          <numboxlist :digit-num="8" :value="personNum" />
        </div>
        <div class="unitbox">分</div>
      </div>
      <div class="line2">
        <div class="left">
          <div class="dbox1">
            <div class="dataline">
              <div class="innerline"></div>
              <span class="value">8</span>
            </div>
            <div class="imgbox2"></div>
            <div class="titleline">WTA排名</div>
          </div>
        </div>
        <div class="right">
          <div class="titleline">
            <div class="deco"></div>
            <span class="title">近期 （{{ moockData.lastName }}）</span>
          </div>
          <div class="barbox barbox1" @mouseover="
            (e) =>
              showBox(e, {
                name: moockData.first.name,
                value: moockData.first.score,
                percent: moockData.first.rank,
              })
          " @mouseleave="hiddenBox">
            <div class="textline">
              <span class="title">郑钦文</span>
              <span class="percent">{{ moockData.first.num }}</span>
            </div>
            <div class="barline">
              <div class="bottomline"></div>
              <div class="percentline" :style="{
                width: `50%`,
                backgroundColor: '#037DFD',
              }">
                <div class="dot"></div>
              </div>
            </div>
          </div>
          <div class="barbox barbox2" @mouseover="
            (e) =>
              showBox(e, {
                name: moockData.two.name,
                value: moockData.two.score,
                percent: moockData.two.rank,
              })
          " @mouseleave="hiddenBox">
            <div class="textline">
              <span class="title">{{ moockData.two.name }}</span>
              <span class="percent"> {{ moockData.two.num }}</span>
            </div>
            <div class="barline">
              <div class="bottomline"></div>
              <div class="percentline" :style="{
                width: `50%`,
                backgroundColor: '#FECA34',
              }">
                <div class="dot"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </commonpanel>
</template>
<script lang="ts" setup>
// @ts-nocheck
import { inject, computed, ref } from 'vue';
import type { Ref } from 'vue';
import commonpanel from '@/components/common/panel.vue';
import numboxlist from '@/components/common/numboxlist.vue';
import moockData from '@/mock/home';
type IShowBoxProps = {
  name: string;
  value: number | string;
  percent: number | string;
};

let updateCarStats = inject('updateCarStats');

function debounce(fn, delay: number) {
  let timer: number | null = null; //借助闭包
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay); // 简化写法
  };
}

let showBox = (e: Event, data: IShowBoxProps) => {
  let clientX = e.clientX;
  let clientY = e.clientY;
  debounce(
    updateCarStats({
      isshow: true,
      name: data.name,
      value: data.value,
      percent: data.percent,
      clientX: clientX + 40,
      clientY,
      unit: '',
    }),
    200
  );
};

let hiddenBox = () => {
  updateCarStats({
    isshow: false,
  });
};
const personNum = ref(4193);
</script>
<style lang="scss" scoped>
.contentbox {
  overflow: hidden;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.line1 {
  margin-top: 16px;
  height: 36px;
  overflow: hidden;

  .innerbox2 {
    margin-left: 30px;
    overflow: hidden;
    height: 36px;
    width: 326px;
    float: left;

    display: flex;
    justify-content: space-between;

    .numbox {
      flex: 1;
    }
  }

  .unitbox {
    font-size: 14px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #ffffff;
    line-height: 56px;
    height: 36px;
    float: left;
  }
}

.line2 {
  margin-top: 6px;
  padding-left: 34px;
  flex: 1;
  display: flex;

  .left {
    .dbox1 {
      width: 106px;
      height: 140px;

      position: relative;

      .dataline {
        position: absolute;
        height: 60px;
        width: 100%;
        top: 2px;
        text-align: center;

        .innerline {
          position: absolute;
          width: 58%;

          height: 100%;
          left: 50%;
          transform: translateX(-54%);
          background-image: url('@/assets/img/img19.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        animation: updown 6s ease-in-out infinite alternate;
        -webkit-animation: updown 6s ease-in-out infinite alternate;

        .value {
          font-size: 20px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: #ffffff;
          line-height: 28px;
          text-align: center;
        }

        .unit {
          height: 14px;
          font-size: 10px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #ffffff;
          line-height: 14px;
        }

        @-webkit-keyframes updown {
          25% {
            -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
          }

          100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
          }

          75% {
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
          }
        }
      }

      .imgbox2 {
        background-image: url('@/assets/img/img20.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100px;
        width: 100%;
        position: absolute;
        bottom: 0;
      }

      .titleline {
        position: absolute;
        top: 76px;
        text-align: center;
        width: 100%;

        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #ffffff;
        line-height: 17px;
      }
    }
  }

  .right {
    flex: 1;
    margin-left: 40px;
    margin-right: 26px;

    .titleline {
      height: 20px;
      margin-top: 18px;
      overflow: hidden;

      .deco {
        float: left;
        width: 4px;
        height: 100%;
        background-color: #2388fa;
      }

      .title {
        float: left;
        margin-left: 8px;
        font-size: 14px;
        line-height: 20px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: #ffffff;
        position: relative;
      }
    }

    .barbox {
      cursor: pointer;

      padding-top: 12px;
      padding-bottom: 12px;

      .textline {
        height: 16px;

        font-size: 12px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: #ffffff;
        line-height: 16px;
        //opacity: 0.8;

        .value {
          float: right;
          margin-right: 14px;
        }

        .percent {
          float: right;
        }
      }

      .barline {
        margin-top: 6px;
        height: 6px;
        overflow: hidden;
        position: relative;

        .bottomline {
          height: 3px;
          width: 100%;
          background-color: #144c72;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }

        .percentline {
          width: 99%;
          height: 6px;
          border-radius: 3px;
          position: absolute;
          top: 0;
          background-color: #097cfe;

          .dot {
            width: 6px;
            height: 6px;
            background-color: #fff;
            float: right;
            border-radius: 3px;
          }
        }
      }
    }
  }
}
</style>
